<template>
  <div>
    <Table v-if="pageData"   :columns="listColumns" :data="pageData"></Table>
    <Page :total="listData.length" size="small" show-sizer :page-size="pageSize" :current="current"
          @on-change="(val)=>{handleCurrentChange(val)}"
          @on-page-size-change	="(val)=>{handleSizeChange(val)}"
    ></Page>
  </div>
</template>
<script>
export default {
  name: 'MyTable',
  props: ['listColumns', 'listData'],
  data(){
    return {
      pageSize:10,
      current:1,
      pageData :[]
    }
  },
  mounted() {
    this.pageData = this.listData.slice((this.current-1)*this.pageSize, this.pageSize*(this.current))

  },
  methods:{
    handleSizeChange(val) {
      this.pageSize = val
      this.current = 1
      this.pageData = this.listData.slice((this.current-1)*this.pageSize, this.pageSize*(this.current))
    },
    handleCurrentChange(val) {
      this.current = val
      this.pageData = this.listData.slice((this.current-1)*this.pageSize, this.pageSize*(this.current))
    }
  },
  watch:{
    listData(){
      this.pageData = this.listData.slice((this.current-1)*this.pageSize, this.pageSize*(this.current))
    }
  }
}
</script>
<style scoped>
.ivu-page {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>